<template>
    <div class="app-container">
        <el-row>
            <el-col :span="8">
                <h4 class="form-header h4">订单信息</h4>
                <el-descriptions column="1" size="medium">
                    <el-descriptions-item label="服务名称">{{ serviceLog.miniProgramOrder.serviceName }}</el-descriptions-item>
                    <el-descriptions-item label="规格名称">{{ serviceLog.miniProgramOrder.standardsName
                    }}</el-descriptions-item>
                    <el-descriptions-item label="购买次数">{{ serviceLog.miniProgramOrder.serviceNum }}</el-descriptions-item>
                    <el-descriptions-item label="服务次数">{{ serviceLog.miniProgramOrder.serviceNumCount
                    }}</el-descriptions-item>
                    <el-descriptions-item label="待预约次数">{{ serviceLog.miniProgramOrder.serviceNumSurplus
                    }}</el-descriptions-item>
                    <el-descriptions-item label="订单金额">{{ serviceLog.miniProgramOrder.orderPrice }}</el-descriptions-item>
                    <el-descriptions-item label="订单编号">{{ serviceLog.miniProgramOrder.orderNumber }}</el-descriptions-item>
                    <el-descriptions-item label="订单备注">{{ serviceLog.miniProgramOrder.orderRemarks || "无"
                    }}</el-descriptions-item>
                </el-descriptions>
            </el-col>
            <el-col :span="8">
                <h4 class="form-header h4">本次服务信息</h4>
                <el-descriptions column="1" size="medium">
                    <el-descriptions-item label="联系人">{{ serviceLog.miniProgramOrderUser.receiver }}</el-descriptions-item>
                    <el-descriptions-item label="服务地址">{{ serviceLog.miniProgramOrderUser.orderAddress
                    }}</el-descriptions-item>
                    <el-descriptions-item label="服务重点区域">{{ mainAreaString || "无" }}</el-descriptions-item>
                    <el-descriptions-item label="服务时间">{{ serviceLog.miniProgramOrderUser.serviceTime
                    }}</el-descriptions-item>
                    <el-descriptions-item label="工作时长">{{ serviceLog.miniProgramOrderUser.workTime
                    }}小时</el-descriptions-item>
                    <el-descriptions-item label="实际开始时间">{{ serviceLog.serviceLog.startTime }}</el-descriptions-item>
                    <el-descriptions-item label="实际结束时间">{{ serviceLog.serviceLog.completeTime }}</el-descriptions-item>
                </el-descriptions>
            </el-col>
            <el-col :span="8">
                <h4 class="form-header h4">本次服务负责人</h4>
                <el-descriptions column="1" size="medium">
                    <el-descriptions-item label="姓名">{{ serviceLog.miniProgramStaff.staffName }}</el-descriptions-item>
                    <el-descriptions-item label="联系电话">{{ serviceLog.miniProgramStaff.staffPhone }}</el-descriptions-item>
                </el-descriptions>
            </el-col>
        </el-row>
        <el-row>
            <h4 class="form-header h4">打卡图片</h4>
            <div class="image-container">
                <div class="image-item" v-for="image in serviceLog.serviceLog.clockImg" :key="index">
                    <el-image style="width: 200px; height: 200px" :src="baseUrl + image" :fit="contain"></el-image>
                </div>
            </div>
        </el-row>
        <el-row>
            <h4 class="form-header h4">服务前图片</h4>
            <div class="image-container">
                <div class="image-item" v-for="image in serviceLog.serviceLog.beforeServiceImg" :key="index">
                    <el-image style="width: 200px; height: 200px" :src="baseUrl + image" :fit="contain"></el-image>
                </div>
            </div>
        </el-row>
        <el-row>
            <h4 class="form-header h4">服务后图片</h4>
            <div class="image-container">
                <div class="image-item" v-for="image in serviceLog.serviceLog.afterServiceImg" :key="index">
                    <el-image style="width: 200px; height: 200px" :src="baseUrl + image" :fit="contain"></el-image>
                </div>
            </div>
        </el-row>
    </div>
</template>
  
<script>
import { getServiceLog } from "@/api/miniprogram/order";

export default {
    name: "ServiceLog",
    data() {
        return {
            baseUrl: process.env.VUE_APP_IMG_BASE_URL,
            // 服务日志信息
            serviceLog: {},
            mainAreaList: ["客厅", "卧房", "厨房", "阳台", "窗沿", "衣柜"],
            mainAreaString: ""
        };
    },
    created() {
        const orderUserId = this.$route.params && this.$route.params.orderUserId;
        if (orderUserId) {
            this.getServiceLog(orderUserId);
        }
    },
    methods: {
        //获取服务日志
        getServiceLog(orderUserId) {
            this.loading = true;
            getServiceLog(orderUserId).then(response => {
                this.serviceLog = response.data;
                this.getMainAreaString(response.data.miniProgramOrderUser.cleanAreas.split(''));
            });
        },
        getMainAreaString(mainArea) {
            let mainAreaString = "";
            let mainAreaList = this.mainAreaList;
            for (let index in mainArea) {
                if (mainArea[index] == 1) {
                    mainAreaString = mainAreaString + "、" + mainAreaList[index];
                }
            }
            return mainAreaString.substring(1);
        }
    },
};
</script>
<style scoped>
.image-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.image-item {
    margin-right: 30px;
}
</style>